<%@ page contentType="text/html; charset=utf-8" %>
<style type="text/css">
	.menu-div { font-size:62.5%; padding:0;width:100% ;height:60px;}
	.menu-div-background {background-color:#E8FFC4 }
	.menu-a-div { margin-left: 150px;margin-top: 35px}
	.menu-detail {font-size:62.5%; margin:0; padding:0; }
	.hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; }
	.fg-button { margin:0 0px 40px 1px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
	.fg-button .ui-icon { position: absolute; top: 50%; margin-top: -8px; left: 50%; margin-left: -8px; }
	a.fg-button { float:left;  }
	button.fg-button { width:auto; overflow:visible; }
	.fg-button-icon-right { padding-right: 2.1em; }
	.fg-button-icon-left .ui-icon { right: auto; left: .2em; margin-left: 0; }
	.fg-button-icon-right .ui-icon { left: auto; right: .2em; margin-left: 0; }
	.fg-button-icon-solo { display:block; width:8px; text-indent: -9999px; }	 /* solo icon buttons must have block properties for the text-indent to work */	
	.fg-button.ui-state-loading .ui-icon { background: url(img/spinner_bar.gif) no-repeat 0 0; }
</style>
<script type="text/javascript">    
    $(function(){
    	$('#menu-product').menu({ 
			content: $('#product-menu-div').html(),
			showSpeed: 400 
		});
    	$('#menu-home').menu({ 
			content: $('#home-menu-div').html(),
			showSpeed: 400 
		});
    });
</script>
<div class="menu-div menu-div-background">
	<div class="menu-a-div">
		<a tabindex="0" href="javascript:void(0)" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="menu-home"><span class="ui-icon ui-icon-triangle-1-s"></span>首页</a>
		<a tabindex="1" href="javascript:void(0)" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="menu-product"><span class="ui-icon ui-icon-triangle-1-s"></span>产品</a>
	</div>
	<div id="all-menu-div" class="hidden">
		<div id="home-menu-div">
			<ul class="menu-detail">
				<li><a href="welcome.html">首页</a></li>
				<li><a href="#">Yahoo</a></li>
				<li><a href="#">MSN</a></li>
				<li><a href="#">Ask</a></li>
				<li><a href="#">AOL</a></li>
			</ul>
		</div>
		<div id="product-menu-div">
			<ul class="menu-detail">
				<li><a href="#">Google</a></li>
				<li><a href="#">Yahoo</a></li>
				<li><a href="#">MSN</a></li>
				<li><a href="#">Ask</a></li>
				<li><a href="#">AOL</a></li>
			</ul>
		</div>
	</div>
</div>
